<template>
    <div id="app">
        <el-container v-if="$route.meta.requireAuth">
            <el-header class="fixed-top">
                <TopNav></TopNav>
            </el-header>
            <el-container style="padding-top: 65px;">
                <el-aside style="width:200px">
                    <LeftNav></LeftNav>
                </el-aside>
                <el-main class="main" :style={height:leftHeight}>
                    <transition name="slide-fade">
                        <router-view></router-view>
                    </transition>
                </el-main>
            </el-container>
        </el-container>
        <el-container v-else>
            <router-view></router-view>
        </el-container>
    </div>
</template>

<script>
    import LeftNav from '@/components/LeftNav.vue'
    import TopNav from '@/components/TopNav.vue'

    export default {
        name: 'App',
        data() {
            return {
                leftHeight: 0,
                url: ''
            }
        },
        components: {
            LeftNav,
            TopNav
        },
        computed: {
        },
        created() {

        },
        mounted() {
            this.leftHeight = (document.documentElement.clientHeight - 65) + 'px';

        },
        methods: {

        }
    }
</script>

<style lang="less">
    .check{
        color: #0c1aff;
        padding-left: 20px;
    }
    .check:hover{
        color: #66b1ff;
        cursor: pointer;
        text-decoration: underline;
    }
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-transition-delay: 99999s;
        -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
    }
    ::-webkit-scrollbar{
        width: 2px;
    }
    .mrt-10{
        margin-right: 10px;
    }
    .v-modal{
        z-index: 20 !important;
    }
    .el-form-item{
        margin-bottom: 10px !important;
    }
    .el-form-item__error{
        top: 80% !important;
    }
    .el-header {
        padding: 0px !important;
    }
    .el-dialog{
        border-radius: 6px !important;
    }
    .el-dialog__header{
        text-align: center !important;
    }
    .el-menu-item-group__title {
        padding: 0px 0px 0px 20px !important;
    }
    .el-table td, .el-table th.is-leaf{
        border-bottom: none !important;
    }
    .el-dialog__footer{
        text-align: center !important;
    }
    .main {
        background-color: #f8f8f8;
        padding: 10px !important;
    }
    .box-content {
        background-color: #fff;
        padding: 10px;
        border-radius: 4px;
        overflow: hidden;
    }
    .slide-fade-enter-active {
        transition: 0.4s all 0.3s ease;
    }

    .slide-fade-leave-active {
        transition: all 0.3s ease;
    }

    .slide-fade-enter,
    .slide-fade-leave-to {
        transform: translate3d(40px, 0, 0);
        opacity: 0;
    }
</style>
